<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小呆萌</title>
    <!-- 引入openlayers的js库 -->
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <!-- 引入css样式 -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css">
</head>
<body>
    <div id="map">
        <div id="leftDiv">
            <button class="btn1" id="fullMap">全屏</button>
            <button class="btn1" onclick="zoomIn()">放大一级</button>
            <button class="btn1" onclick="zoomOut()">缩小一级</button>
            <button class="btn1" id="roam">漫游</button>
        </div>
        <!-- 退出全图功能 -->
        <div id="">
            <button class="btn1" id="backFullMap" style="display: none;">退出全图</button>
        </div>
        <div id="rightDiv">
            <!-- 右侧选择框 -->
            <div id="btnDiv">
                <button class="btn" id="btn1">定位</button>
                <button class="btn" id="btn2" onclick="DisplayMap()">显示图层</button>
                <button class="btn" id="btn3" onclick="HideMap()">隐藏图层</button>
                <button class="btn" id="btn4">测距</button>
                <button class="btn" id="btn5">测面积</button>
                <button class="btn" id="btn6">截图</button>
                <button class="btn" id="btn7">卷帘</button>
                <button class="btn" id="btn8">绘制</button>
                <button class="btn" id="changeMap">切换图层</button>
            </div>
            <!-- 绘制下方div -->
            <div id="draw">
                <div class="drawClass" id="pointDiv" onclick="DrawPoint()">绘制点</div>
                <div class="drawClass" id="lineDiv" onclick="DrawLine()">绘制线</div>
                <div class="drawClass" id="polygonDiv" onclick="DrawPolygon()">绘制面</div>
                <div class="drawClass" id="clearDraw" onclick="ClearAll()">清空</div>
            </div>
            <!--测距下方按钮 -->
            <div id="distanceDiv">
                <div id="close2Div"><button id="close2">X</button></div> <br>
                <div id="innerDiv">

                    距离：<input id="dis" /><br>

                </div>
            </div>
            <!-- 定位按钮下方div框 -->
            <div id="pos">
                <div id="head">
                    <b>（东、北方向为正 , 西、南方向为负）</b>
                    <button id="close">X</button>
                </div>
                <br>
                <div id="wei">
                    纬度：<input type="text" id="latitude" class="inputClass">
                </div>
                <div id="jing">
                    经度：<input type="text" id="longitude" class="inputClass">
                </div>
            </div>
            <!-- 右下角放置截图div -->
            <div id="areaDiv">
                <button id="close3">X</button> <br>
                面积为：<input type="text" id="area">
            </div>
            <!-- 卷帘下方Div -->
            <div id="swipeDiv">
                <b style="color: gray;">(拖动以控制卷帘)</b>
                <button id="close4">X</button> <br>
                <input type="range" id="swipe">
            </div>


            <div id="hideDiv">
                <div class="div1" onclick="showMap1()">
                    <label for="input1">
                        <input type="radio" class="inputClass" name="mapSource" id="input1" checked />OpenStreetMap地图
                    </label>
                </div>
                <div class="div1" onclick="showMap2()">
                    <label for="input2">
                        <input type="radio" class="inputClass" name="mapSource" id="input2" />Stamen地图
                    </label>
                </div>
                <div class="div1" onclick="showMap3()">
                    <label for="input3">
                        <input type="radio" class="inputClass" name="mapSource" id="input3" />高德地图
                    </label>
                </div>
                <div class="div1" onclick="showMap4()">
                    <label for="input4">
                        <input type="radio" class="inputClass" name="mapSource" id="input4" />阿里云地图
                    </label>
                </div>
            </div>
        </div>

    </div>
    <!-- 引入js -->
    <script src="js/basemap.js"></script>
    <script src="js/fun1.js"></script>
    <script src="js/fun2.js"></script>
    <!-- 引入css -->
    <link rel="stylesheet" href="css/demo.css">
</body>

</html>